<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<div class="layui-fluid">
    <div class="layui-card">

        <div class="layui-card-header" style="color:#d02e25;font-family: '楷体'; ">
            学员信息
        </div>


        <div class="layui-card-body">
            <table id="studentlist" lay-filter="studentlist"></table>
        </div>
    </div>
</div>





<script>
    layui.use(['table','form'], function(){
        var table = layui.table
            ,form = layui.form;
        var laydate = layui.laydate;

        //农资列表
        table.render({
            elem: '#studentlist'
            // ,height: 'full-200'
            ,method: 'post'
            ,url: '/ajax/party/admin/studentlist'
            ,page: true
            ,loading: true
            ,cellMinWidth: 80
            ,limit: 15
            ,id: 'lessonlist'
            ,cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'},
                {field: 'name', title: '学生名', width: 100, align:'center'}
                ,{field: 'livein', title: '居住地 ', align:'center'}
                ,{field: 'branch', title: '所属党支部', align:'center'}
                ,{field: 'unlearned', title: '未完成课程数', align:'center'}
                ,{field: 'haveLearn', title: '完成的课程数 ', align:'center'}
                ,{fixed: 'right', title: '操作', align: 'center', width: 120, toolbar: '#dothing' }
            ]]
        });

        //监听工具条
        table.on('tool(studentlist)', function(obj){
            var data = obj.data;

            if(obj.event === 'detail'){

                $.post('/ajax/party/admin/getOneStudent',{
                    id:data.id
                },function(result){
                    layer.open({
                        type: 1,
                        area: ['1000px','80%'],
                        title: "ID:" + data.id,
                        offset: '10%',
                        anim: 4,
                        shadeClose: true,
                        content:showDetails(result.data)
                    });
                    var unlearn = result.unLearn;
                    var havelearn = result.haveLearn;
                    if(unlearn.length !=0){
                        for(var i=0;i<unlearn.length;i++){
                            $("#unLearn").append('  <span style="font-family: 楷体; font-size: 25px;margin: 10px; color: red;">'+unlearn[i]  +'</span>')
                        }
                    }else {
                        $("#unLearn").append('<span style="font-family: 楷体; font-size: 25px;margin: 10px;text-align:center;display:block;color: blue;">该学生已经完成所有课程！</span>\n');
                    }

                    if(havelearn.length !=0){
                        for (var i=0;i<havelearn.length;i++){
                            $("#haveLearn").append('  <span style="font-family: 楷体; font-size: 25px;margin: 10px; color: green;">'+havelearn[i]  +'</span>')
                        }
                    }else {
                        $("#haveLearn").append('<span style="font-family: 楷体; font-size: 25px;margin: 10px;text-align:center;display:block;color: blue;">该学生还需努力，没有完成任何一门课程！</span>\n');
                    }

                });
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.post("/ajax/party/admin/deleteStudent",{
                        id:data.id
                    },function(result){
                        console.log(result);
                        if(result.code==0){
                            layer.alert(result.msg);
                        }
                        obj.del();
                        layer.close(index);
                    });
                });
            }
        });





    });
</script>

<script type="text/html" id="dothing">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>

    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="application/javascript">
    function showDetails(data) {

        var s ='<form class="layui-form" id="form1">\n' +
            '    <div class="layui-card">\n' +
            '        <div class="layui-card-body">\n' +
            '\n' +
            '            <div class="layui-form-item layui-form-text">\n' +
            '                <label class="layui-form-label">姓名</label>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <input type="text" name="name" value='+ data.name +'  lay-verify="required"\n' +
            '                           autocomplete="off" class="layui-input">\n' +
            '                </div>\n' +
            '\n' +
            '                <label class="layui-form-label">居住地</label>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <input type="text" name="livein" value='+ data.livein +' lay-verify="required"\n' +
            '                           autocomplete="off" class="layui-input">\n' +
            '                </div>\n' +
            '\n' +
            '                <label class="layui-form-label">所属党支部</label>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <div class="layui-inline">\n' +
            '                        <input type="text" name="branch" value='+ data.branch +' lay-verify="required"\n' +
            '                               autocomplete="off" class="layui-input">\n' +
            '                    </div>\n' +
            '                </div>\n' +
            '\n' +
            '            </div>\n' +
            '\n' +
            '            <div class="layui-form-item layui-form-text">\n' +
            '                <label class="layui-form-label">未完成课程数</label>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <input type="text" name="unlearned" value='+ data.unlearned +'  lay-verify="required"\n' +
            '                           autocomplete="off" class="layui-input">\n' +
            '                </div>\n' +
            '\n' +
            '                <label class="layui-form-label">完成的课程数</label>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <input type="text" name="haveLearn" value='+ data.haveLearn +'  lay-verify="required"\n' +
            '                           autocomplete="off" class="layui-input">\n' +
            '                </div>\n' +
            '\n' +
            '            </div>\n' +
            '\n' +
            '            <div class="layui-form-item layui-form-text">\n' +
            '                <span style="font-family: 楷体; font-size: 25px;margin: 10px;text-align:center;display:block;">未完成的课程：</span>\n' +
            '                <div style="margin-left: 50px;" id="unLearn">\n' +
            '\n' +
            '                </div>\n' +
            '\n' +
            '                <span style="font-family: 楷体; font-size: 25px;margin: 10px;text-align:center;display:block;">完成的课程：</span>\n' +
            '                <div style="margin-left: 50px;" id="haveLearn">\n' +
            '\n' +
            '                </div>\n' +
            '\n' +
            '\n' +
            '\n' +
            '            </div>\n' +
            '\n' +
            '\n' +
            '\n' +
            '        </div>\n' +
            '    </div>\n' +
            '</form>';


        return s;
    }


</script>


</div>